
.general-selector {
	background: url(../style/table.jpg) no-repeat;
	background-size: 100% 100%;
	height: 100%;
	overflow: hidden;

	.general-card {
		width: 154px;
		height: 180px;
		border-radius: 15px;
		overflow: hidden;
		box-shadow: rgba(70, 70, 70, 1) 1px 1px 6px 2px;
		margin: 20px;
		display: inline-block;

		&.unselectable {
			filter: grayscale(90%);
			box-shadow: none;
		}

		&:not(.unselectable):hover,
		&.selected {
			border: white 1px solid;
			box-shadow: white 0 0 6px 2px;
			box-sizing: border-box;

			&.wei {
				border-color: #547998;
				box-shadow: #547998 0 0 6px 2px;
			}
			&.wu {
				border-color: #4DB873;
				box-shadow: #4DB873 0 0 6px 2px;
			}
			&.shu {
				border-color: #D0796C;
				box-shadow: #D0796C 0 0 6px 2px;
			}
			&.qun {
				border-color: #8A807A;
				box-shadow: #8A807A 0 0 6px 2px;
			}
		}

		img {
			width: 100%;
		}
	}

	ul.general {
		margin: 60px 100px 20px 100px;
		text-align: center;
	}

	ul.general li {
		display: inline-block;
	}

	.button-area {
		text-align: center;
	}

	button {
		font-size: 16pt;
	}
}
